<form name=formUsuarioRole role="form" id="formUsuarioRole" >

    <div class="form-inline margin-bottom-10 col-md-12" >



        <div class="form-group">
            <label for="sistemaFiltro">Sistema</label>
            <br />
            <select name="sistemaFiltro" id="sistemaFiltro" ng-model="idRoleSistema" class="form-control col-md-12" >
                <option value=""></option>
                <option ng-repeat="objsis in comboRoleSistema" value="{{objsis.id}}" >{{objsis.sistema.nome}}</option>
            </select> 
        </div>
        <div class="form-group">
            <label for="perfil">Perfil</label>
            <br />
            <select name="perfil" id="perfil" ng-model="idPerfilFiltro" class="form-control col-md-12" >
                <option value=""></option>
                <option ng-repeat="objsis in comboPerfil" value="{{objsis.id}}" >{{objsis.nome}}</option>
            </select> 
        </div>


    </div>
    <!--
    Botao adicionar sistema
    -->


    <br />
    <div class="col-md-12">
        <div class="col-md-5">
            <table class="table table-striped table-bordered lista">
                <thead>
                    <tr>
                        <th class="fundo_cinza">Permissões</th>
                        <th class="fundo_cinza" colspan="1">Opções</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="usuRol in roles| orderBy:orderUsup:orderOption">
                        <!-- repeat de ocorrencias in ocorrencia-->
                        <td class="" >
                            <a>{{usuRol.nome}}</a>
                        </td>



                        <td title="Adicionar para direita" class="opcoes col-md-1">
                            <a ng-click="addDir(usuRol)" class="btn btn-primary" data-dismiss="modal">
                                <i class="glyphicon glyphicon-step-forward"></i>
                            </a>

                        </td>

                    </tr>
                </tbody>
            </table>
        </div>
        

        <div class="col-md-5" style=" width: 14.66666667%; ">
            <a ng-click="addTodosDir(roles)" class="btn btn-primary" data-dismiss="modal">
                <i class="glyphicon glyphicon-fast-forward"></i>
            </a>
            <br>
            <a ng-click="addTodosEsq(usuarioRoles)" class="btn btn-primary" data-dismiss="modal">
                <i class="glyphicon glyphicon-fast-backward"></i>
            </a>
        </div>


        <div class="col-md-5">
            <table class="table table-striped table-bordered lista">
                <thead>
                    <tr>
                        <th class="fundo_cinza" colspan="1">Opções</th>
                        <th class="fundo_cinza">Permissões</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="usuRol in usuarioRoles| orderBy:orderUsup:orderOption">
                        <!-- repeat de ocorrencias in ocorrencia-->
                        <td title="Remover da lista" class="opcoes col-md-1">
                            <a ng-click="addEsq(usuRol)" class="btn btn-primary" data-dismiss="modal">
                                <i class="glyphicon glyphicon-step-backward"></i>
                            </a>

                        </td>
                        <td class="" >
                            <a>{{usuRol.nome}}</a>
                        </td>                       

                    </tr>
                </tbody>
            </table>
        </div>
    </div>  

</form>
